<script setup lang="ts">
import { h, ref } from "vue"
import {
  FormInst,
  useMessage,
  NButton,
  NForm,
  NFormItem,
  NInput,
  NDataTable,
  NSelect,
} from "naive-ui"
import pagination from "@/components/pagination.vue"
import { getUsersList, updateUser } from "@api/index"

const formRef = ref<FormInst | null>(null)
const message = useMessage()

const formValue = ref({
  status: null,
  phonenumber: null,
  key: "",
})
const pageConfig = ref({
  page: 1,
  pageSize: 10,
})
const pageTotal = ref(0)
const userStatus = [
  {
    label: "正常",
    value: 1,
  },
  {
    label: "停用",
    value: 2,
  },
]

const columns = [
  {
    title: "用户ID",
    key: "userId",
  },
  {
    title: "用户名",
    key: "userName",
  },
  {
    title: "手机号",
    key: "phonenumber",
  },
  {
    title: "账号状态",
    key: "status",
    render(row: any) {
      return userStatus.find((item: any) => row.status === item.value)?.label
    },
  },
  {
    title: "创建时间",
    key: "createTime",
  },
  {
    title: "操作",
    key: "action",
    render(row: any) {
      return [
        h(
          NButton,
          {
            size: "small",
            onClick: () => {
              message.warning('暂未启用该功能')
              // if (row.status === 1) {
              //    handleIndentStatus({ status: 2, userId: row.userId })
              // } else {
              //    handleIndentStatus({ status: 1, userId: row.userId })
              // }
            },
          },
          { default: () => (row.status === 1 ? "停用" : "启用") }
        ),
      ]
    },
  },
]

const usersList: any = ref([])
const handleGetUserList = (data: any) => {
  getUsersList(data).then((res: any) => {
    pageTotal.value = res.data?.totalCount
    usersList.value = res.data.list
  })
}
handleGetUserList({ limit: pageConfig.value.pageSize, page: pageConfig.value.page })

//搜索功能
const handleSearch = () => {
  formRef.value?.validate(errors => {
    if (!errors) {
      handleGetUserList({ ...formValue.value, page: 1, limit: 10 })
    } else {
      console.log(errors)
    }
  })
}

//更新状态
const handleIndentStatus = (data: any) => {
  updateUser(data).then((res: any) => {
    if (res.code === 200) {
      message.success(res.msg)
    } else {
      message.error(res.msg)
    }
    handleGetUserList({
      limit: pageConfig.value.pageSize,
      page: pageConfig.value.page,
      ...formValue.value,
    })
  })
}

//分页
const handleChangePage = () => {
  handleGetUserList({
    limit: pageConfig.value.pageSize,
    page: pageConfig.value.page,
    ...formValue.value,
  })
}
</script>

<template>
  <div class="wrapper">
    <div class="search">
      <n-form ref="formRef" inline :label-width="80" label-placement="left" :model="formValue">
        <n-form-item label="手机号:" path="phonenumber">
          <n-input v-model:value="formValue.phonenumber" placeholder="全部" clearable />
        </n-form-item>
        <n-form-item label="状态:" path="status">
          <n-select v-model:value="formValue.status" placeholder="全部" clearable :options="userStatus"
            class="form_select" />
        </n-form-item>
        <n-form-item label="" path="key">
          <n-input v-model:value="formValue.key" placeholder="模糊搜索" clearable />
        </n-form-item>
        <n-form-item>
          <n-button attr-type="button" @click="handleSearch"> 搜索 </n-button>
        </n-form-item>
      </n-form>
    </div>
    <div class="table">
      <n-data-table :columns="columns" :data="usersList" :pagination="false" :bordered="false" />
      <pagination :pageTotal="pageTotal" :pageConfig="pageConfig" :handleChangePage="handleChangePage" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.wrapper {
  overflow-y: scroll; //竖向滚动
  overflow-x: scroll; //横向滚动

  .search {
    height: 100px;
    padding: 20px;
    background-color: var(--BlockBgColor);
    transition: background-color 0.3s var(--n-bezier);
    display: flex;
    align-items: center;
    margin-bottom: 12px;

    .form_select {
      width: 100px;
    }
  }

  .table {
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--BlockBgColor);
    transition: background-color 0.3s var(--n-bezier);

    .table_action {
      height: 60px;
      display: flex;
      align-items: center;
    }
  }
}
</style>
